<template>
  <div class="navbar">
    <div class="container nav-item">
      <div>
        <router-link to="/hotel">婚宴酒店</router-link>
      </div>
      <div>
        <router-link to="/reservation">婚宴预定</router-link>
      </div>
      <div>
        <router-link to="/zanding">推荐酒店</router-link>
      </div>
      <div>
        <router-link to="/zanding">婚宴菜单</router-link>
      </div>
      <div>
        <router-link to="/zanding">婚宴用酒</router-link>
      </div>
      <div>
        <router-link to="/zanding">探店攻略</router-link>
      </div>
      <div>
        <router-link to="/zanding">注意事项</router-link>
      </div>
    </div>
  </div>
</template>
<style scoped>
.nav-item .router-link-exact-active {
  background-color: #fa4f5f;
}
.navbar {
  background-color: #f83244;
  margin-bottom: 30px;
}
.navbar .nav-item {
  display: flex;
}
.navbar .nav-item div {
  height: 44px;
  line-height: 44px;
  margin: 0 15px;
}
.navbar .nav-item div:hover {
  background-color: #fa4f5f;
}
.navbar a {
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 0 15px;
}
/* 来自APP.vue */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 禁止复制  */
  /* user-select:none; */
  /*光标透明 */
  caret-color: rgba(0, 0, 0, 0);
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a {
  text-decoration: none;
  outline: none;
}
ul li {
  list-style: none;
}
.btn {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  outline: none;
}
.btn-primary {
  background-color: #f83244;
  color: #fff;
}
.a_hover {
  color: #333;
}
.a_hover:hover {
  color: #f83244;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
</style>